<template>
<div>
   <div class="g_top_box">
		<div class="g_right_box"></div> 
		<div class="g_left_box"><h4>团队信息</h4></div>
	</div>
	<div class="g_content_box">

		<Form :model="info" label-position="left" :label-width="100">

			<FormItem label="所属公司">
				<Select v-model="info.company_id" style="width:200px">
					<Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
				</Select>
			</FormItem>
			<FormItem label="名称">
				<Input v-model="info.name" style="width:200px;"></Input>
			</FormItem>
			
			<FormItem>
				<Button type="primary" @click="save">修改</Button>
			</FormItem>
			<FormItem label="成员">
				<Table :columns="Columns" :data="list" style="width: 100%;"></Table>
				
				<a @click="show_member(id)">设置成员</a>
			</FormItem>
			<FormItem label="地区">
				<Table :columns="regionColumns" :data="region_list" style="width: 100%;"></Table>
				
				<a @click="add_region">添加地区</a>
			</FormItem>
		</Form>

		
	</div>
	<user_member v-model="member.show" @change="sel_user_change" :data="member.sels"></user_member>
	<Modal
        v-model="region.show"
        title="添加地区"
        @on-ok="region_ok"
        >
        <div>
			<Form label-position="left" :label-width="100">


			<FormItem label="名称">
				<Input v-model="region.name" style="width:200px;"></Input>
			</FormItem>
		</Form>
		</div>
    </Modal>
</div>
</template>

<script>
import user_member from '../user_member';

import Wcore from '@/libs/common';
export default {
    name: 'team_info',
    data (){
		var self = this;
        return {
            info:{
				name:''
			},
			id:0,
			Columns: [
				{
					title: 'ID',
					key: 'id',
					align: 'center',
                    width: 80
                },
				{
                    title: '名称',
					key: 'nickname',
					width: 200,
                },
				{
                    title: '手机号码',
					key: 'mobile',
					width: 200,
                },
				{
					title: '操作',
					key: 'action',
					render: (h, params) => {
						return h('div', [
							/*
							h('Button', {
								props: {
									type: 'error',
									size: 'small',
									icon:'trash-a'
								},
								style: {
									
								},
								on: {
									click: () => {
										this.remove(params.row.id)
									}
								}
							}, '删除')
							*/
						]);
					}
				}
            ],
			list:[],
			member:{
				show:false,
				id:0,
				sels:[]
			},
			regionColumns:[
				{
					title: 'ID',
					key: 'id',
					align: 'center',
                    width: 80
                },
				{
                    title: '名称',
					key: 'name',
					width: 200,
                },
				{
					title: '操作',
					key: 'action',
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									type: 'error',
									size: 'small',
									icon:'trash-a'
								},
								on: {
									click: () => {
										self.remove_region(params.row.id);
									}
								}
							}, '删除')
						]);
					}
				}
            ],
			region_list:[],
			region:{
				show:false,
				name:''
			},
			companyList:[]
        };
    },
	components:{
		user_member
	},
	created(){
		this.id = this.$route.params.id;
		this.load_data();
		this.load_comyany();
		this.load_member();
		this.load_region();
		this.$emit('change','team');
	},
    computed: {
       
    },
	methods:{
		load_data(){
			var self = this;
			var postdata = {
				id:this.id
			};
			Whttp.load('User/Team/get_info',postdata,function(result){
				self.info = result;
			});
		},
		load_comyany(){
			var self = this;
			var postdata = {
			
			};
			Whttp.load('User/Company/get_list',postdata,function(result){
				self.companyList = result.list;
			});
		},
		save(){
			var self = this;
			var postdata = {
				id:this.id,
				name:this.info.name,
				company_id:this.info.company_id,
			};
			Whttp.load('User/Team/save',postdata,function(result){
				self.$Message.info('保存成功');
				self.$router.back();
			});
		},
		load_member(){
			var self = this;
			var postdata = {
				team_id:this.id
			};
			Whttp.load('User/Team/get_member_list',postdata,function(result){
				self.list = result;
			});
		},
		load_region(){
			var self = this;
			var postdata = {
				team_id:this.id
			};
			Whttp.load('User/Team/get_region_list',postdata,function(result){
				self.region_list = result;
			});
		},
		remove(id){
			if(!confirm('是否删除')){
				return;
			}
			var self = this;
			var postdata = {
				id:id
			};
			Whttp.load('User/Team/del_member',postdata,function(result){
				self.load_member();
			});
		},
		show_member(id){
			this.member.id = id;
			var ids = [];
			
			for(var i=0;i<this.list.length;i++){
				ids.push(this.list[i].id);
			}
			this.member.sels = ids;
			
			this.member.show=true;
		},
		sel_user_change(list){
			var self = this;
			var ids = [];
			for(var i=0;i<list.length;i++){
				ids.push(list[i].id);
			}
			if(ids.length<=0){
				alert('请选择成员');
				return;
			}
			
			var postdata = {
				ids:ids,
				team_id:this.member.id
			};
			Whttp.load('User/Team/add_member',postdata,function(result){
				alert('设置成员成功');
				self.load_member();
			});
		},
		add_region(){
			
			this.region.show = true;
		},
		region_ok(){
			var self = this;
			var postdata = {
				team_id:this.id,
				name:this.region.name
			};
			Whttp.load('User/Team/add_region',postdata,function(result){
				//alert('添加地区成功');
				self.load_region();
			});
		},
		remove_region(id){
			if(!confirm('是否删除')){
				return;
			}
			var self = this;
			var postdata = {
				id:id
			};
			Whttp.load('User/Team/del_region',postdata,function(result){
				self.load_region();
			});
		},
	}
};
</script>
<style scoped>

</style>